<template>
    <div class="root">
        <div class="header1">
            <span>exCitiLoan | 易旗贷</span>
             <span class="login" @click="toLogin" >登录</span>
        </div>
        <div class="header2">
            <el-menu
                :default-active="activeIndex"
                class="el-menu-demo"
                mode="horizontal"
            >
                <el-menu-item index="1" @click="toCreditRating"><i class="el-icon-document-checked"></i>信用评级</el-menu-item>
                <el-menu-item index="2" @click="toCalculator"><i class="el-icon-c-scale-to-original"></i>贷款计算器</el-menu-item>
                <el-menu-item index="3" @click="toRecommend"><i class="el-icon-discount"></i>企业推荐</el-menu-item>
                <el-menu-item index="4" @click="toPartner"><i class="el-icon-user"></i>易旗伙伴</el-menu-item>
                
            </el-menu>
            <span><el-button type="primary" icon="el-icon-search">搜索</el-button></span>
           
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            activeIndex:"activeIndex"
        };
    },
    methods: {
        toLogin:function(){
            this.$router.push({
                name:'login'
            })
        },
        toCreditRating:function(){
            this.$router.push({
                name:'creditRating'
            })
        },
        toCalculator:function(){
            this.$router.push({
                name:'calculator'
            })
        },
        toRecommend:function(){
            this.$router.push({
                name:'recommend'
            })
        },
        toPartner:function(){
            this.$router.push({
                name:'partner'
            })
        }
    }
};
</script>

<style lang = "less" scoped>
.header1{
    display:flex;
    justify-content: space-between;  //两端对齐
    align-items:center;    // 在竖直方向上在交叉轴中点对齐
    width:100%;
    height:60px;
    background-color:rgb(34, 76, 190);
    span{
        color:white;
        margin-left: 20px;
        margin-right:20px;
    }
}
.header2{
    display:flex;
    justify-content: space-between;  //两端对齐
    align-items:center;    // 在竖直方向上在交叉轴中点对齐

    border-bottom:0.1px solid rgb(189, 188, 188); 
}
.login{
    color:grey;
    float:right;
    margin-right: 40px;
    font-family: "Hiragino Sans GB","PingFang SC";
}
</style>